import React, { FC, useState } from 'react'
import { Spin, Result, Button } from 'antd'
import { useTitle } from 'ahooks'
import { useNavigate } from 'react-router-dom'
import useLoadQuestionData from '../../../hooks/useLoadQuestionData'
import useGetPageInfo from '../../../hooks/useGetPageInfo'
import styles from './index.module.scss'
import StatHeader from './StatHeader/StatHeader'
import ComponentList from './ComponentList/ComponentList'
import ChartStat from './ChartStat/ChartStat'
import PageStat from './PageStat/PageStat'

const Stat: FC = () => {
    const nav = useNavigate()

    const { loading } = useLoadQuestionData()
    const { isPublished, title } = useGetPageInfo()

    // 状态提升 selectedId type
    const [selectedComponentId, setSelectedComponentId] = useState('')
    const [selectedComponentType, setSelectedComponentType] = useState('')

    // 修改网页标题
    useTitle(`小滕问卷-问卷统计`)

    // loading的页面内容
    const LoadingElem = (
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
            <Spin />
        </div>
    )

    // 不loading时的页面内容
    const genContentElem = () => {
        if (typeof isPublished === 'boolean' && !isPublished) {
            return (
                <div style={{ flex: 1 }}>
                    <Result
                        status="warning"
                        title="该页面尚未发布"
                        subTitle="抱歉，您访问的页面尚未发布！"
                        extra={
                            <Button
                                type="primary"
                                onClick={() => {
                                    nav(-1)
                                }}
                            >
                                返回
                            </Button>
                        }
                    />
                </div>
            )
        }
        return (
            <>
                <div className={styles.left}>
                    <ComponentList
                        selectedComponentId={selectedComponentId}
                        setSelectedComponentId={setSelectedComponentId}
                        setSelectedComponentType={setSelectedComponentType}
                    />
                </div>
                <div className={styles.main}>
                    <PageStat
                        selectedComponentId={selectedComponentId}
                        setSelectedComponentId={setSelectedComponentId}
                        setSelectedComponentType={setSelectedComponentType}
                    ></PageStat>
                </div>
                <div className={styles.right}>
                    <ChartStat
                        selectedComponentId={selectedComponentId}
                        selectedComponentType={selectedComponentType}
                    ></ChartStat>
                </div>
            </>
        )
    }

    return (
        <div className={styles.container}>
            <StatHeader></StatHeader>
            <div className={styles['content-wrapper']}>
                <div className={styles.content}>{loading ? LoadingElem : genContentElem()}</div>
            </div>
        </div>
    )
}
export default Stat
